<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <el-row style="margin-bottom: 5px">
      <el-col :span="24">
        <el-button @click="goBack" size="small">返回</el-button>
      </el-col>
    </el-row>
    <Title name="图纸详情" :line="false">
      <desc-base-info
        :data="info"
        :colnum-info="baseInfo"
        align="right"
        :no-line-height="true"
        label-width="160px"
        class="base-info"
      >
      </desc-base-info>
      <el-divider></el-divider>
      <div class="img-area">
        <img class="blueprint-img" :src="info.paperUrl" alt="" />
      </div>
    </Title>
  </lb-layout>
</template>

<script>
import { detail } from "@/api/park/bluePrint";
export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      info: { paperUrl: "" },
      // blueprintImg:
      //   "http://img33.house365.com/M02/9D/BD/rBEBp1ld8iOAVZH5AAI2hQXX4lo970.jpg",
    };
  },
  computed: {
    baseInfo({ info }) {
      let arr = [];
      arr = [
        { label: "园区名称", prop: "parkName", colNum: 3 },
        { label: "图纸名称", prop: "name", colNum: 3 },
        { label: "上传时间", prop: "createTime", colNum: 3 },
        { label: "更新时间", prop: "updateTime", colNum: 3 },
        { label: "备注", prop: "remarks", colNum: 3 },
      ];
      return arr;
    },
  },

  mounted() {
    if (this.$route.query.id) {
      this.getInfo(this.$route.query.id);
    }
  },
  methods: {
    getInfo(id) {
      detail(id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.info = { ...this.info, ...res.data };
          this.info.paperUrl = this.baseUrl + this.info.paperUrl;
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员! 错误码307004");
        });
    },
    goBack() {
      this.$router.push({
        path: "/resource/park/bluePrint",
        query: {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.base-info {
  ::v-deep .zeda-grid-item {
    .zeda-grid-label {
      font-size: 18px;
    }
    .zeda-grid-value {
      font-size: 22px;
    }
  }
}
.img-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .blueprint-img {
    width: 1300px;
    height: 700px;
  }
}
</style>
